import React, { useState, useContext, useEffect } from "react";
import { Routes, Route, NavLink, useLocation } from 'react-router-dom'
import { Recommend, Backend, Frontend, Android, Ios } from '../views'
// import { getCategories, getArticles } from '../fake-api'
import { AuthContext, initState } from "../contexts/authContext"
import { Articles } from "../components/Articles/Articles"
import { Detail } from "../components/Detail/Detail"
import "./nav.css"
import axios from "axios";

export const NavRouter = () => {
  // 设置一级路由地址数组
  const RouterAddress = ['/recommend', "/backend", "/frontend", "/android", "/ios"]

  //获取当前地址
  let { pathname } = useLocation()
  // url 用来判断当前路由是不是文章详情页面
  let url = pathname.split("/")[1]
  
  // 获取状态
  const { state, dispatch } = useContext(AuthContext);
  
  const getData = async () => {
    // 获取所有的分类，也就是路由信息
    const categories = await axios.get('/api/getCategories');
    const data = categories.data.data.categories;
    // 将路由信息交个reducer管理，使得全局能访问
    await dispatch({ categories: data })
  }
  // getData()
  useEffect(async () => {
    await getData()
  }, [])
  useEffect(() => {
    //通当前路径来选择默认传入的category_id
    RouterAddress.forEach((item, index) => {
      if (pathname == item) {
        // 默认传一个当前一级路由地址的category_id，用来获取文章，放在刷新没有文章显示
        dispatch({ category_id: index })
      }
    })

  }, [state.category_id])

  return (
    <>
      {
        url!="post"&&<div className="view-nav" >
          <ul>
            {
              state.categories ? state.categories.map((item) => {
                return (
                  <li key={item.category_id} onClick={() => dispatch({ type: item.category_name, category_id: item.category_id })} >
                    <NavLink style={{ textDecoration: 'none' }} to={RouterAddress[item.category_id]} >{item?.category_name}</NavLink>
                  </li>
                )
              }) : ""
            }
          </ul>
        </div>
      }

      <div className={url != "post" ? "articles-nav-box" :"articles-detail"}>
        <div className="article-nav-separate"></div>
        <Routes>
          <Route exact path="/recommend" element={<Recommend />}>
            <Route exact path="" element={<Articles />}></Route>
          </Route>
          <Route exact path="/backend" element={<Backend />} >
            <Route exact path=":id" element={<Articles />}>

            </Route>
          </Route>
          <Route exact path="/frontend" element={<Frontend />}>
            <Route exact path=":id" element={<Articles />} />
          </Route>
          <Route exact path="/android" element={<Android />} >
            <Route exact path=":id" element={<Articles />} />
          </Route>
          <Route exact path="/ios" element={<Ios />} >
            <Route exact path=":id" element={<Articles />} />
          </Route>
          <Route exact path="/" element={<Recommend />}>
            <Route exact path="" element={<Articles />} />
          </Route>
          <Route path="/post/:id" element={<Detail />} />
        </Routes>
      </div>


    </>
  )
}